<template>
  <el-container>
    <!-- 侧边栏区域 -->
    <!-- 删除默认的aside的宽度让宽度自适应就能实现aside的展开收起 -->
    <el-aside width="">
      <h1 class="logo">logo</h1>
      <el-menu :collapse="isCollapse"
               class="el-menu-vertical-demo">
        <qf-sub-menu :sideMenu='sideMenu'>

        </qf-sub-menu>

      </el-menu>
    </el-aside>
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <el-row type="flex"
                class="row-bg"
                justify="space-between">
          <el-col :span="6">
            <div class="grid-content left">
              <i :class="['iconfont',isCollapse?'icon-shouqizhankai-shouqi':'icon-shouqizhankai-zhankai']"
                 @click="isCollapse=!isCollapse"></i>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content center">
              CRM管理
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content right">
              <el-avatar shape="square"
                         :size="40"
                         :src="headimg"></el-avatar>
              <b>欢迎你:
                <el-dropdown @command='command'>
                  <span class="el-dropdown-link">
                    {{userinfo.nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon='el-icon-platform-eleme'
                                      command='vipcharge'>vip充值</el-dropdown-item>
                    <el-dropdown-item icon='el-icon-user-solid'
                                      command='users'>账号信息</el-dropdown-item>
                    <el-dropdown-item icon='el-icon-s-order'
                                      command='product'>项目管理</el-dropdown-item>
                    <el-dropdown-item icon='el-icon-delete-solid'
                                      @click.native="quit">退出</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </b>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <!-- 主要区域 -->
      <el-main>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for='item in breadcrumb'
                              :key='item.name'
                              :to='{name: item.name}'>
            {{item.meta.name}}
          </el-breadcrumb-item>

        </el-breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import { mapMutations, mapState, mapActions } from 'vuex'
  import { getloginlog, getMenulist } from "../../api"
  import allrouters from '../../router/allrouters'
  import userRouter from '../../utils/recurisonRouters'
  export default {
    data() {
      return {
        isCollapse: false,
        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      }
    },
    components: {
    },
    mounted() {

    },
    computed: {
      //将面包写数据映射进来
      ...mapState(['breadcrumb']),
      //将侧边栏路由数据映射进来
      ...mapState(['sideMenu']),
      //从vuex映射用户info
      ...mapState(['userinfo']),
      //动态获取头像，如果有头像就使用info中的头像否则就使用默认头像
      headimg() {
        return this.userinfo.headimgurl ? this.userinfo.headimgurl : "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
      }
    },
    methods: {
      ...mapActions(['GET_MENULIST']),
      quit() { //退出登录 
        //第一步清除token
        localStorage.removeItem('login-token');
        //第二部跳转登录页
        this.$router.push('/login');
        //弹出消息
        this.$message({
          message: '已经退出登录',
          type: 'success',
          duration: 1000
        });
        //刷新页面重置路由
        location.reload()
      },
      send() {
        //打印日志
        //第一个参数传递this用于axios获取组件
        // getloginlog(this).then((res) => {
        //   console.log(res);
        // })

        //后台返回的权限菜单

      },
      cancel() {
        //取消请求

      },
      //点击菜单项触发的事件回调
      command(routerName) {
        //形参就是下拉菜单传入的名字
        if (!undefined) {
          this.$router.push({ name: routerName })
        }

      }
    }

  }
</script>

<style lang='scss' scoped>
  .el-header {
  	background: linear-gradient(80deg, deepskyblue, rgb(111, 0, 255));
  	color: #333;
  	text-align: center;
  	min-height: 60px !important;
  	.left {
  		line-height: 37px;
  		/* 放在父容器中才能靠左对齐 */
  		text-align: left;
  		i {
  			font-size: 50px;
  			cursor: pointer;
  		}
  	}
  	.el-avatar {
  		vertical-align: middle;
  		margin-right: 12px;
  	}
  	/*下拉菜单样式 */
  	.el-dropdown-link {
  		cursor: pointer;
  		color: #409eff;
  		font-size: 16px;
  		margin-left: 5px;
  	}
  	.el-icon-arrow-down {
  		font-size: 14px;
  	}
  }

  .el-aside {
  	background: linear-gradient(-180deg, deepskyblue, hotpink);
  	color: #333;
  	text-align: center;
  	.logo {
  		min-height: 60px;
  		background-color: greenyellow;
  	}
  	.subMenu {
  		text-align: left;
  	}
  	/* 展开收起侧边栏动画样式 */
  	::v-deep .el-menu-vertical-demo:not(.el-menu--collapse) {
  		width: 200px;
  		min-height: 400px;
  	}
  }

  .el-main {
  	background-color: #e9eef3;
  	color: #333;
  	text-align: center;
  }
  .el-container {
  	margin-bottom: 40px;
  	/* 需要#app也是100%才能撑满 */
  	height: 100%;
  }

  /* 顶栏区域 */
  .el-row {
  	margin-bottom: 20px;
  	&:last-child {
  		margin-bottom: 0;
  	}
  }
  .el-col {
  	border-radius: 4px;
  }
  .grid-content {
  	border-radius: 4px;
  	min-height: 36px;
  	b {
  		margin-right: 10px;
  	}
  	.el-button--mini {
  		position: absolute;
  		top: 15px;
  		cursor: pointer;
  		background-color: purple;
  		border: 1px solid purple;
  	}
  	.el-dropdown-link {
  		color: #fff;
  		margin-right: 5px;
  	}
  }
  .row-bg {
  	padding: 10px 0;
  }
</style>
